<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="renderer" content="webkit">
  <title>网站信息</title>
  <link rel="stylesheet" href="../../css/pintuer.css">
  <link rel="stylesheet" href="../../css/admin.css">
  <script src="../../js/jquery.js"></script>
  <script src="../../js/pintuer.js"></script>
  <script src="../../js/jquery.form.js"></script>
</head>

<body>
  <div class="panel admin-panel">
    <div id="info"></div>
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>添加食物</strong></div>
    <div class="body-content">
      <form class="form-x" id="assetForm" enctype="multipart/form-data">
        <div class="form-group">
          <div class="label">
            <label>名称：</label>
          </div>
          <div class="field">
            <input type="text" id="url1" name="name" class="input tips" style="width:25%; float:left;" value="" />
            <div class="tips"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="label">
            <label>价格：</label>
          </div>
          <div class="field">
            <input type="text" id="url2" name="price" class="input tips" style="width:25%; float:left;" value="" />
            <div class="tips"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="label">
            <label>图片：</label>
          </div>
          <div class="field">
            <input type="text" id="url2" name="img" class="input tips" style="width:25%; float:left;" value="" />
            <div class="tips"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="label">
            <label>图片：</label>
          </div>
          <div class="field">
            <!-- <input type="file" id="url2" name="price" class="input tips" style="width:25%; float:left;" value="10" /> -->
          <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input id="file" size="100"  onchange="show(this)"  type="file" /></a>
          <div class="tips"></div>
          <img id="img"></img>

          </div>
        </div>
        <div class="form-group">
          <div class="label">
            <label></label>
          </div>
          <div class="field" style="margin-top: 20px">
            <button class="button bg-main icon-check-square-o" type="button" id="agreementSub"> 提交</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
<script>
   function show(file) {
     console.log(1)
      var reader = new FileReader();	// 实例化一个FileReader对象，用于读取文件
      var img = document.getElementById('img'); 	// 获取要显示图片的标签

      //读取File对象的数据
      reader.onload = function (evt) {
        img.width = "85";
        img.height = "85";
        img.src = evt.target.result;
      }
      reader.readAsDataURL(file.files[0]);
    }
  $(document).ready(function () {
   

    $('#agreementSub').on('click', function () {
        //上传图片的input
        var file = document.getElementById("file")
        //因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
        //创建formdata对象
        var formData = new FormData();
        //给formdata对象中放入数据(键值对的方式)
        formData.append('file', file.files[0]);
        //提交请求
        $.ajax({
          url: 'http://127.0.0.1:3000/api/food/addfoodimg',//请求路径
          type: 'POST',
          data: formData,
          contentType: false,//为了让浏览器根据传入的formdata来判断contentType
          processData: false,//同上
          success: function (data) {
            console.log(data)
           
          },
          error: function () {
          }
        });
      $('#assetForm').ajaxSubmit({
        url: 'http://127.0.0.1:3000/api/food/addfood',
        type: 'get',
        dataType: 'json',
        data: $('#assetForm').serialize(),
        success: function (data) {
          console.log(data)
          if (data.code == 1) {
            window.location.href = "food.html?info='操作成功'"
          } else if(data.code == 0){
            var str =
              `
                    <div class="alert alert-red">
                      <span class="close rotate-hover"></span><strong>注意：</strong>${data.msg}</div>
                    </div>
                `
            $('#info').html(str)
            setTimeout(function () {
              $('#info').html('')
            }, 2000)
          }else{
          }
        },
        error: function (err) {
          console.log(err)
        },
        clearForm: false, //禁止清除表单
        resetForm: false //禁止重置表单
      })
    })
  })
</script>

</html>